<template>
  <div class="grid">
    <el-card>
      <div class="demo-input-suffix">
        <div class="title">姓名</div>
        <el-input placeholder="请输入姓名" v-model="name"> </el-input>
      </div>
      <div class="demo-input-suffix">
        <div class="title">手机号</div>
        <el-input placeholder="请输入手机号" v-model="phone"> </el-input>
      </div>
      <div class="demo-input-suffix card_num">
        <div class="title">就诊卡号</div>
        <el-input placeholder="请输入就诊卡号" v-model="visitCardNo">
        </el-input>
      </div>
      <!--   <div class="demo-input-suffix card_num">
        <div class="title long">签到状态</div>
        <el-select v-model="status" placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div> -->
      <div class="demo-input-suffix card_num tiem_">
        <div class="title long">下单时间</div>

        <el-date-picker
          v-model="time_val"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-DD"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="serach_btn cp" @click="serachBtn">搜索</div>
    </el-card>
    <el-card class="aa cp">
      <div slot="header" class="pt-re">
        <div class="clearfix f-row ai-c">
          <div
            :class="['title', arrive == null ? 'active' : '']"
            @click="choiceTab(null)"
          >
            全部({{ listHeadData.all }})
          </div>
          <div
            :class="['title', arrive == 0 ? 'active' : '']"
            @click="choiceTab(0)"
          >
            未签到({{ listHeadData.notSign }})
          </div>
          <div
            :class="['title', arrive == 1 ? 'active' : '']"
            @click="choiceTab(1)"
          >
            已签到({{ listHeadData.Sign }})
          </div>
          <div
            :class="['title', arrive == 5 ? 'active' : '']"
            @click="choiceTab(5)"
          >
            已过号({{ listHeadData.miss }})
          </div>
        </div>
      </div>
      <tableAssembly
        :hasSelect="false"
        :data="dataList"
        :columns="columnsList"
        :pagination="pagination"
        @page-change="handlePageChange"
        @size-change="handleSizeChange"
      ></tableAssembly>
    </el-card>
    <el-dialog title="预约信息" :visible.sync="dialogVisible" width="60%">
   <div>
    <div class="title">预约信息</div>
    <div class="info">
      <div class="category">
        <div class="left">就诊人:</div>
        <div class="right">{{ yuyueData?.userVisitCard.username }}</div>
      </div>
      <div class="category">
        <div class="left">电话号码:</div>
        <div class="right">{{ yuyueData?.userVisitCard.mobile }}</div>
      </div>
      <div class="category">
        <div class="left">性别:</div>
        <div class="right">{{ yuyueData?.userVisitCard.sex==1?'男':'女' }}</div>
      </div>
      <!--    <div class="category">
        <div class="left">年龄:</div>
        <div class="right">4545</div>
      </div> -->
      <div class="category">
        <div class="left">挂号序号:</div>
        <div class="right">{{yuyueData?.serialNo}}</div>
      </div>
      <div class="category">
        <div class="left">接诊专家:</div>
        <div class="right">{{ yuyueData?.expert.realName}}</div>
      </div>
      <div class="category">
        <div class="left">就诊时段:</div>
        <div class="right">{{ yuyueData?.timeSlot}}</div>
      </div>
      <div class="category">
        <div class="left">就诊卡号:</div>
        <div class="right">{{ yuyueData?.visitCardNo}}</div>
      </div>
      <div class="category">
        <div class="left">院区场地:</div>
        <div class="right">{{ yuyueData?.site?.siteName }}</div>
      </div>
    </div>
  </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { qd_list, qd_hushi, qd_yuyue } from "@/request/api";
import tableAssembly from "@/components/common/tabbleAssembly.vue";
export default {
  components: {
    tableAssembly,
  },
  data() {
    return {
      yuyueData:null,
      dialogVisible: false,
      current_head: null,
      listHeadData: {
        all: null,
        notSign: null,
        Sign: null,
        miss: null,
      },
      name: null,
      phone: null,
      visitCardNo: null,
      status: null,
      time_val: null,
      typeList: [
        {
          id: 1,
          name: "全部",
        },
        {
          id: 2,
          name: "未签到",
        },
        {
          id: 3,
          name: "已签到",
        },
        {
          id: 4,
          name: "已过号",
        },
      ],
      // 分页
      pagination: {
        page: 1,
        rows: 10,
        total: 0,
        pageSizes: [10, 20],
      },
      // 表单数据
      dataList: [],
      // 表头数据
      columnsList: [
        {
          type: "index",
          width: "50",
          label: "序号",
        },
        /*  {
          prop: "num",
          label: "排队序号",
          width: "100",
        }, */
        {
          prop: "userVisitCard.username",
          label: "姓名",
          width: "60",
        },
        {
          prop: "expert.realName",
          label: "专家",
          width: "60",
        },
        {
          prop: "userVisitCard.mobile",
          label: "手机号",
          width: "150",
        },
        {
          prop: "userVisitCard.sex",
          label: "性别",
          width: "50",
          render: (m) => {
            return <div>{m.userVisitCard?.sex == 1 ? "男" : "女"}</div>;
          },
        },
        {
          prop: "timeSlot",
          label: "预约时段",
        },
        {
          prop: "visitCardNo",
          label: "就诊卡号",
          width: "100",
        },
        {
          prop: "createTime",
          label: "下单时间",
        },
        {
          prop: "receiveTime",
          label: "接诊时间",
        },
        {
          prop: "status",
          label: "签到状态",
          width: "70",
          render: (m) => {
            let val = null;
            if (m.arrive == 0) {
              val = "未签到";
            } else if (m.arrive == 1 && m.status != 5) {
              val = "已签到";
            } else {
              val = "已过号";
            }
            return <div>{val}</div>;
          },
        },
        {
          prop: "handle",
          label: "操作",
          fixed: "right",

          render: (m) => {
            return (
              <div>
                {m.arrive == 0 ? (
                  <span
                    onClick={this.qiandao.bind(this, m)}
                    class="btn-deep  mt-1"
                  >
                    签到
                  </span>
                ) : null}
                <span
                  onClick={this.chakanyuyue.bind(this, m)}
                  class="btn-light  mt-1"
                >
                  查看预约
                </span>
                {m.arrive == 1 && m.status == 5 ? (
                  <span
                    onClick={this.qiandao.bind(this, m)}
                    class="btn-deep  mt-1"
                  >
                    重新签到
                  </span>
                ) : null}
              </div>
            );
          },
        },
      ],
      arrive: null,
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    isok() {},
    //查看预约
    chakanyuyue(m) {
      qd_yuyue(m.id).then((res) => {
        if (res.code == 200) {
          this.yuyueData=res.result
          this.dialogVisible = true;
        } else {
          this.$message.error("操作失败，请重试！");
        }
      });
    },
    //签到
    qiandao(m) {
      qd_hushi(m.id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "操作成功！",
            type: "success",
          });
          this.pagination.page = 1;
          this.getdata();
        } else {
          this.$message.error("操作失败，请重试！");
        }
      });
    },

    //获取数据
    getdata() {
      qd_list({
        start:this.time_val?this.time_val[0]:null,
        end:this.time_val?this.time_val[1]:null,
        page: this.pagination.page,
        rows: this.pagination.rows,
        name: this.name,
        phone: this.phone,
        visitCardNo: this.visitCardNo,
        arrive: this.arrive,
        status: this.status,
      }).then((res) => {
        if (res.code == 200) {
          this.pagination.total = res.result.total;
          this.listHeadData.all = res.result.all;
          this.listHeadData.notSign = res.result.notSign;
          this.listHeadData.Sign = res.result.Sign;
          this.listHeadData.miss = res.result.miss;
          this.dataList = res.result.list;
        } else {
          this.$message.error("查询签到列表失败！");
        }
      });
    },
    choiceTab(e) {
      this.arrive = e;
      this.pagination.page = 1;
      this.getdata();
    },
    serachBtn() {
      this.pagination.page = 1;
      this.getdata();
    },
    // 改变页码
    handlePageChange(page) {
      this.pagination.page = page;
       this.getdata();
    },
    // 改变页数
    handleSizeChange(size) {
      this.pagination.rows = size;
      this.pagination.page = 1;
       this.getdata();
    },
    jiezhenFn() {
      this.$router.push("/chat");
    },
    yuyueFn() {
      this.$router.push("/order");
    },
    showFn() {
      this.$router.push("/completed");
    },
    enterFn() {
      this.$router.push("/enterConsultation");
    },
    //勾选
    handlechange(val) {
      console.log(val);
    },
  },
};
</script>
<style lang="less" scoped>

.info {
  padding-left: 1.25rem;
}
.btnback {
  padding: 0.625rem 1.5625rem;
  border-radius: 0.25rem;
  display: inline-block;
  cursor: pointer;
  background: #fd5151;
  color: #fff;
  font-size: 0.875rem;
}
.category {
  font-size: 0.875rem;
  line-height: 3rem;
  display: flex;
  letter-spacing: 0.0938rem;
}

.left {
  color: #9c9c9c;
}
.right {
  color: #1f1f1f;
  font-weight: 500;
}
.title {
  color: #1f1f1f;
  font-weight: 600;
  padding-left: 0.625rem;
}
.aa {
  margin-top: 1.25rem;
}

.grid {
  // display: grid;
  // grid-row-gap: 1.25rem;
  // grid-template-rows: 6.25rem auto;
}
.el-card {
  width: 100%;
  height: 100%;
}

/deep/ .el-card .el-card__body {
  display: flex;
  align-items: center;
}
.serach {
  margin: 1.25rem 0;
}
.demo-input-suffix {
  display: flex;
  align-items: center;
  margin-right: 1.25rem;
  .el-input {
    width: 12.1875rem;
  }
  .title {
    font-size: 0.875rem;
    color: #333333;
    margin-right: 0.625rem;
  }
}
.card_num {
  .title {
    width: 5rem;
  }
}
.tiem_ {
  width: 36rem !important;
  margin-right: 1rem;

  .title {
    width: 5rem !important;
  }
}
.serach_btn {
  background-color: var(--darkColor);
  width: 5rem;
  height: 2.125rem;
  line-height: 2.125rem;
  text-align: center;
  font-size: 0.875rem;
  color: #fff;
  border-radius: 0.25rem;
}
.clearfix {
  .title {
    color: #838383;
    letter-spacing: 0.125rem;
    margin-right: 1rem;
    padding-bottom: 1.125rem;
    cursor: pointer;
  }
  .active {
    color: var(--themeCOlor);
    border-bottom: 2px solid var(--themeCOlor);
    font-weight: 600;
  }
}
</style>